var xData = [
  '2021',
  '2022',
  '2023',
  '2024',
  '2025'
]
var data1 = [120, 200, 150, 90, 70]
var data2 = [300, 150, 100, 40, 50]
var legend = ['2017', '2018']
let maxData = null
function getMaxData() {
  // 合并
  const tempList = [...data1, ...data2]
  // 取绝对值
  tempList.forEach((elem, index) => {
    if (elem < 0) {
      tempList[index] = -elem
    }
  })
  // 排序找出最大
  tempList.sort(function(a, b) {
    return b - a
  })
  return tempList[0]
}
maxData = getMaxData()
export default {
  legend: {
    data: ['2017', '2018']
  },
  grid: [
    {
      show: false,
      left: '6%',
      top: '10%',
      bottom: '8%',
      width: '40%',
      containLabel: true
    },
    {
      show: false,
      left: '50%',
      top: '10%',
      bottom: '8%',
      width: '30%'
    },
    {
      show: false,
      right: '6%',
      top: '10%',
      bottom: '8%',
      containLabel: true,
      width: '40%'
    }
  ],
  xAxis: [
    {
      gridIndex: 0,
      name: '目标',
      type: 'value',
      inverse: true,
      axisLine: {
        show: true
      },
      axisTick: {
        show: true
      },
      splitLine: {
        show: true
      },
      axisLabel: {
        show: true
      },
      max: maxData
    },
    {
      gridIndex: 1,
      show: true
    },
    {
      gridIndex: 2,
      name: '完成',
      type: 'value',
      inverse: false,
      axisLine: {
        show: true
      },
      axisTick: {
        show: true
      },
      splitLine: {
        show: true
      },
      axisLabel: {
        show: true
      },
      max: maxData
    }
  ],
  yAxis: [
    {
      type: 'category',
      gridIndex: 0,
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      }
    },
    {
      gridIndex: 1,
      type: 'category',
      show: true,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        margin: -1, // margin 配合 align 调整位置
        align: 'center',

        textStyle: {
          color: '#fff',

          align: 'center'
        }
      },
      data: xData
    },
    {
      type: 'category',
      gridIndex: 2,
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      }
    }
  ],
  series: [
    {
      xAxisIndex: 0,
      yAxisIndex: 0,
      data: data1,
      type: 'bar',
      barWidth: '15',
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      label: {
        show: true,
        textStyle: {
          color: '#fff'
        },
        position: 'left'
      }
    },
    {
      xAxisIndex: 0,
      yAxisIndex: 0,
      data: data1,
      type: 'bar',
      barWidth: '15',
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      label: {
        show: true,
        textStyle: {
          color: '#fff'
        },
        position: 'left'
      }
    },
    {
      type: 'bar',
      xAxisIndex: 1,
      yAxisIndex: 1,
      itemStyle: {
        normal: {}
      },
      barWidth: '15'
      // data: [120, 200, 150, 80, 70]
    },
    {
      xAxisIndex: 2,
      yAxisIndex: 2,
      data: data2,
      type: 'bar',
      barWidth: '15',
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      label: {
        textStyle: {
          color: '#fff'
        },
        show: true,
        position: 'right'
      }
    },
    {
      xAxisIndex: 2,
      yAxisIndex: 2,
      data: data2,
      type: 'bar',
      barWidth: '15',
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      label: {
        textStyle: {
          color: '#fff'
        },
        show: true,
        position: 'right'
      }
    }
  ]
}
